<template>
	<view>
		<!--<view class="nav-box-f" v-if="false">
			<view class="flex nav-box">
				<view v-for="(nav,i) in data" :key="i" class="nav-item" :class="nav.id==navIndex?'nav-act':''"
					@click="chooseItem(nav.id)">{{nav.title}}</view>
			</view>
		</view>
		<view class="around align day-box" v-if="false">
			<view class="" v-for="(days,ind) in dayList" :key="ind" @click="checkDay(days.id)">
				<view :class="dayIndex==days.id?'day-act':''">{{days.title}}</view>
				<view :class="dayIndex==days.id?'line-act':''" />
			</view>
		</view>-->
		<view class="nav-placeholder box" v-if="false">
			<!-- 第一名 -->
			<view class="champion-box" v-if="frontsList.length !=0 ">
				<view @click="onGoBus(frontsList[0].id)">
					<image src="/static/holdshares/champion.png" mode="aspectFill" class="champion-icon" />
					<image :src="frontsList[0].headimg" mode="aspectFill" class="champion-head" />
					<view class="ws-n">{{frontsList[0].nickname}}</view>
					<image src="/static/holdshares/light.png" mode="aspectFill" class="champion-light" />
				</view>
			</view>
			<view class="between align" v-if="frontsList.length >= 2">
				<!-- 第二名 -->
				<view class="runnerUp-box" @click="onGoBus(frontsList[1].id)">
					<image src="/static/holdshares/runner-up.png" mode="aspectFill" class="runnerUp-icon" />
					<image :src="frontsList[1].headimg" mode="aspectFill" class="runnerUp-head" />
					<view class="ws-n">{{frontsList[1].nickname}}</view>
				</view>
				<!-- 第三名 -->
				<view class="third-winner-box" v-if="frontsList.length >= 3" @click="onGoBus(frontsList[2].id)">
					<image src="/static/holdshares/third-winner.png" mode="aspectFill" class="third-winner-icon" />
					<image :src="frontsList[2].headimg" mode="aspectFill" class="third-winner-head" />
					<view class="ws-n">{{frontsList[2].nickname}}</view>
				</view>
			</view>
		</view>
		<view class="table-box">
			<view class="flex align table-head">
				<view class="ranking-num">排名</view>
				<view class="ranking-name">{{rankingNameTitle}}</view>
				<view class="ranking-count">{{rankingValueTitle}}</view>
			</view>
			<view class="flex align table-item" v-for="(item,i) in list" :key="i">
				<view class="ranking-num">{{ item.ranking }}</view>
				<view class="ranking-name flex align" @click="onGoBus(item.id)">
					<image :src="item.headimg" mode="aspectFill" class="ranking-img" />
					<view class="">{{item.nickname}}</view>
				</view>
				<view class="ranking-count">{{item.num }}</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;margin-bottom: 300rpx;" v-if="noMoreData&&list.length!=0">没有更多啦~
			</view>
		</view>
		<view class="bottomBox" v-if="haveRanking()">
			<view class="my-info around align">
				<view class="column">
					<text>我的</text>
					<text>排名</text>
				</view>
				<view class="flex align info-item">
					<image :src="myranking.headimg" mode="aspectFill" class="my-head" />
					<view class="my-name">{{myranking.nickname}}</view>
				</view>
				<view class="info-item">
					<view class="label-title">第{{myranking.num}}名</view>
				</view>
				<view class="info-item">
					<view class="label-title">{{myranking.ranking}}</view>
				</view>
			</view>
		</view>
		<view class="tab-hig" />
	</view>
</template>

<script>
	import {
		getRankingList
	} from "../../api/index.js"
	export default {
		data() {
			return {
				noMoreData: false,
				systemBarHeight: 0,
				rankingValueTitle: '当日收益',
				rankingNameTitle: '昵称',
				data: [{
						title: '商家',
						id: 1
					},
					{
						title: '用户',
						id: 2
					},
					{
						title: '达人',
						id: 3
					},
					{
						title: 'SAPP商',
						id: 4
					},
					{
						title: '城市商',
						id: 5
					}
				],
				navIndex: 1,
				dayList: [{
						title: '日榜',
						id: 1
					},
					{
						title: '周榜',
						id: 2
					},
					{
						title: '月榜',
						id: 3
					}
				],
				dayIndex: 1,
				pagenum: 1,
				list: [],
				frontsList: [],
				myranking: {},
			}
		},
		onLoad() {
			this.getsystem()
			this.onGetRankinglist()
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetRankinglist('bottom')
		},
		methods: {
			onGoBus(id) {
				if (this.navIndex == 1) {
					this.onSkip(`/pages/business_tab/home?bid=${id}&ranking=true`)
				}
			},
			haveRanking() {
				return JSON.stringify(this.myranking) == "{}"
			},
			onReset() {
				this.pagenum = 1
				this.onGetRankinglist()
			},
			async onGetRankinglist(type) {
				const dayType = this.dayIndex == 1 ? 'day' : this.dayIndex == 2 ? 'week' : 'month'
				console.log(`s=/ApiZwyRequest/dayareaincomepm&type=${this.navIndex}&timetype=${dayType}&pagenum=${this.pagenum}`)
				const res = await getRankingList(
					`s=/ApiZwyRequest/dayareaincomepm&pagenum=${this.pagenum}`
				)
				console.log(`排名数据：${res}`)
				const {
					status,
					msg,
					data,
					fronts,
					myranking
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.frontsList = fronts
					this.myranking = myranking
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			getsystem() {
				let res = uni.getSystemInfoSync();
				this.systemBarHeight = res.statusBarHeight;
			},
			chooseItem(i) {
				this.navIndex = i;
				if (i == 1) {
					this.rankingValueTitle = '当日收益';
					this.rankingNameTitle = '昵称';
				} else if (i == 3) {
					this.rankingValueTitle = '当日收益';
					this.rankingNameTitle = '昵称';
				} else if (i == 4) {
					this.rankingValueTitle = '当日收益';
					this.rankingNameTitle = '昵称';
				} else {
					this.rankingValueTitle = '当日收益';
					this.rankingNameTitle = '昵称';
				}

				this.onReset()
			},
			checkDay(i) {
				this.dayIndex = i;
				this.onReset()
			}
		}

	}
</script>


<style lang="scss" scoped>
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.nav-box-f {
		background-color: #41644A;
	}

	.nav-box {
		background-color: #FF8B89;
		margin: 0 20rpx;
		border-radius: 30rpx;

		.nav-item {
			flex: 1;
			text-align: center;
			font-size: 27rpx;
			color: #FFF;
			line-height: 80rpx;
		}

		.nav-item:first-child {
			border-radius: 30rpx 0 0 30rpx;
		}

		.nav-item:last-child {
			border-radius: 0 30rpx 30rpx 0;
		}

		.nav-act {
			background-color: #FFF;
			color: #41644A;
			border-radius: 30rpx !important;
		}
	}

	.day-box {
		background-color: #41644A;
		color: #FFF;
		padding: 32rpx;
		padding-bottom: 80rpx;
		font-size: 24rpx;

		.day-act {
			font-size: 29rpx;
		}

		.line-act {
			width: 30rpx;
			height: 8rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			background-color: #FFF;
			margin-top: 4rpx;
		}
	}

	.nav-placeholder {
		background-image: linear-gradient(to top, #41644A, #41644A);
	}

	.box {
		padding-bottom: 88rpx;

		.champion-box {
			text-align: center;
			color: #FFF;
			position: relative;

			.champion-head {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid #FFF;
				z-index: 99;
				background-color: #FFF;
			}

			.champion-icon {
				width: 97rpx;
				height: 58rpx;
				position: absolute;
				top: -52rpx;
				left: 0;
				right: 0;
				z-index: 2;
				margin: auto;
			}

			.champion-light {
				width: 322rpx;
				height: 167rpx;
				position: absolute;
				top: 71rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
		}

		.runnerUp-box,
		.third-winner-box {
			margin-left: 70rpx;
			font-size: 26rpx;
			position: relative;
			color: #FFF;

			.runnerUp-icon,
			.third-winner-icon {
				width: 55rpx;
				height: 33rpx;
				position: absolute;
				top: -30rpx;
				left: 0;
				right: 0;
				margin: auto;
			}

			.runnerUp-head,
			.third-winner-head {
				width: 80rpx;
				height: 80rpx;
				background-color: #FFF;
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
		}

		.third-winner-box {
			margin-right: 60rpx;
		}
	}

	.bottomBox {
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background: #fff;
	}

	.my-info {
		margin: 20rpx;
		height: 133rpx;
		background-color: #41644A;
		border-radius: 20rpx;
		font-size: 29rpx;
		color: #FFF;

		.my-head {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.my-name {
			// font-size: 27rpx;
			// border-right: 1rpx solid #e8e8e8;
		}

		.label-title {
			// font-size: 24rpx;
		}
	}

	.table-box {
		border-radius: 20rpx;
		margin-top: -20rpx;
		z-index: 9;
		background-color: #FFF;
	}

	.table-head {
		color: #CCCCCC;
		font-size: 27rpx;
	}

	.ranking-num {
		margin-left: 33rpx;
		min-width: 80rpx;
	}

	.ranking-name {
		flex: 1;
		margin-left: 45rpx;
	}

	.ranking-count {
		margin: 33rpx;
		margin-right: 30rpx;
		text-align: center;
		min-width: 80rpx;
	}

	.table-item {
		font-size: 27rpx;
	}

	.ranking-img {
		width: 67rpx;
		height: 67rpx;
		border-radius: 50%;
		margin-right: 25rpx;
	}

	.pop {
		width: 710rpx;
		margin: 0 auto;

		.inOrder-item {
			line-height: 114rpx;
			text-align: center;
			background-color: #FFFFFF;
		}

		.inOrder-item:first-child {
			border-radius: 20rpx 20rpx 0 0;
			border-bottom: 1rpx solid #efefef;
		}

		.inOrder-item:last-child {
			border-radius: 0 0 20rpx 20rpx;
			border-top: 1rpx solid #efefef;
		}

		.close-btn {
			line-height: 93rpx;
			color: #2C77FF;
			font-weight: bold;
			margin-top: 20rpx;
			margin-bottom: 40rpx;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
	}
</style>